import Taro, { Component } from '@tarojs/taro';
import { View, Label, Text ,Image} from '@doctorwork/components';
import { Picker ,Canvas} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from './../../model/utils/rewrite';
import {timeFormat} from '../../model/utils/common';
import './index.styl';

@connect(({ price }) => ({
    ...price
}))
@rewriteAddMTA
export default class Price extends Component {
    constructor(props){
        super(props);

        this.state = {
            selector:['北京', '上海', '江苏', '天津', '重庆', '江西', '辽宁', '安徽', '内蒙古', '福建', '宁夏', '甘肃', '青海', '广东', '山东', '广西', '山西', '贵州', '陕西', '海南', '四川', '河北', '西藏', '河南', '新疆', '黑龙江', '吉林', '云南', '湖北', '浙江', '湖南'],
            province : '',
            date : ''
        };
    }
    config = {
        navigationBarTitleText: '今日油价'
    };


    componentDidShow() {
        const province =  wx.getStorageSync('province')||'四川';
        const today =  timeFormat(Date.now(), 'YYYY-MM-DD');
        const params={
            province,
            date:today
        };
        this.setState(params);
        this.getOilPrice(params);
    }
    /**
     * 获取今日油价
     * @param {*} params 
     */
    getOilPrice(params){
        this.props.dispatch({
            type: 'price/getOilPrice',
            payload:params
        });
    }
    /**
     * 
     * @param {*} e 
     */
    provinceChange(e){
        console.log('选择省份:',e);
        const index = e.detail.value;
        const {selector,date} = this.state;
        const province =  selector[index];
        this.setState({province});
        wx.setStorageSync('province',province);
        this.getOilPrice({date,province});
    }
    /**
     * 切换日期
     * @param {*} e 
     */
    onDateChange(e){
        const date = e.detail.value;
        const {province} = this.state;
        this.setState({date});
        this.getOilPrice({date,province});
    }
    /**
     * 修改选中的oilType
     * @param {*} oilType 
     */
    changeOilType(oilType){
        this.props.dispatch({
            type: 'price/save',
            payload: {
                oilType
            }
        });
        this.props.dispatch({
            type: 'price/initCanvas'
        });
    }

    render() {

        const { price,oilType } = this.props;
        const {province,date} = this.state;
        return (
            <View className='container'>
                <Navigate
                    title='今日油价'
                    color='black'
                    backgroundColor='white'
                    backTextColor='black'
                />
                
                <View className='price'>
                    <View className='ingredient'>今日油价【{price.province}】
                    </View>
                    <View className='food-material'>
                        <Label>所在地区</Label>
                        <Label>{province}省(市) <View className='picker' >
                            <Picker mode='selector' value={province}  range={this.state.selector} onChange={this.provinceChange}>
                                点击切换>
                            </Picker>
                        </View> </Label>
                    </View>
                    <View className='food-material'>
                        <Label>日期</Label>
                        <Label>{date}
                            <View className='picker'>
                                <Picker mode='date' onChange={this.onDateChange}>
                                点击切换>
                                </Picker>
                            </View>
                        </Label>
                    </View>
                    {
                        price && <View className='food-list'>
                            <View className={oilType == 0 ? 'food-item active' : 'food-item'} onClick={() => this.changeOilType(0)}>
                                <Label> 0号油(元/升) 
                                    <Label className={price.reduce0 > 0 ? 'price-up' : 'price-down'}> 
                                        {price.reduce0} <Image src={price.reduce0 > 0 ? require('./imgs/up.png') : require('./imgs/down.png')}></Image>
                                    </Label>
                                </Label>
                                <Text>{price.oil0/100||'暂无数据'}</Text>
                            </View>
                            <View className={oilType == 92 ? 'food-item active' : 'food-item'}  onClick={() => this.changeOilType(92)}>
                                <Label> 92号油(元/升) 
                                    <Label className={price.reduce92 > 0 ? 'price-up' : 'price-down'}> 
                                        {price.reduce92} <Image src={price.reduce92 > 0 ? require('./imgs/up.png') : require('./imgs/down.png')}></Image>
                                    </Label>
                                </Label>
                                <Text>{price.oil92/100||'暂无数据'}</Text>
                            </View>
                            <View className={oilType == 93 ? 'food-item active' : 'food-item'} onClick={() => this.changeOilType(92)}>
                                <Label> 93号油(元/升)
                                    <Label className={price.reduce92 > 0 ? 'price-up' : 'price-down'}> 
                                        {price.reduce92} <Image src={price.reduce92 > 0 ? require('./imgs/up.png') : require('./imgs/down.png')}></Image>
                                    </Label>
                                </Label>
                                <Text>{price.oil92/100||'暂无数据'}</Text>
                            </View>
                            <View className={oilType == 95 ? 'food-item active' : 'food-item'} onClick={() => this.changeOilType(95)}>
                                <Label> 95号油(元/升)
                                    <Label className={price.reduce95 > 0 ? 'price-up' : 'price-down'}> 
                                        {price.reduce95} <Image src={price.reduce95 > 0 ? require('./imgs/up.png') : require('./imgs/down.png')}></Image>
                                    </Label>
                                </Label>
                                <Text>{price.oil95/100||'暂无数据'}</Text>
                            </View>
                            <View className={oilType == 97 ? 'food-item active' : 'food-item'} onClick={() => this.changeOilType(95)}>
                                <Label> 97号油(元/升)
                                    <Label className={price.reduce95 > 0 ? 'price-up' : 'price-down'}> 
                                        {price.reduce95} <Image src={price.reduce95 > 0 ? require('./imgs/up.png') : require('./imgs/down.png')}></Image>
                                    </Label>
                                </Label>
                                <Text>{price.oil95/100||'暂无数据'}</Text>
                            </View>
                            <View className={oilType == 98 ? 'food-item active' : 'food-item'} onClick={() => this.changeOilType(98)}>
                                <Label> 98号油(元/升)
                                    <Label className={price.reduce98 > 0 ? 'price-up' : 'price-down'}> 
                                        {price.reduce98} <Image src={price.reduce98 > 0 ? require('./imgs/up.png') : require('./imgs/down.png')}></Image>
                                    </Label>
                                </Label>
                                <Text>{price.oil98/100||'暂无数据'}</Text>
                            </View>

                        </View>
                    }


                    


                </View>


                <View className='price'>
                    <View className='ingredient'>近期油价【{oilType}号油】
                    </View>
                    <View class='mychart-view'>
                        <Canvas canvas-id='lineCanvas' disable-scroll='true' class='canvas'></Canvas>
                    </View>
                </View>
            </View>

        );
    }
}
